<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>
<body>
</body>
</html>

<script>
/* 昨天回顾 
事件Type 、 事件冒泡  、 事件委托
箭头函数

*/


/* 事件类型：
鼠标事件：
  click、dblclick、contextmenu、
  mouseenter、mouseleave：不会冒泡
  mouseover、mouseout 
  mousemove
  mousedown、mouseup


键盘事件：
  keydown、keyup、keypress

触摸：
  touchstart、touchmove、touchend

BOM：
  load、resize、scroll

表单事件：
  input、change、focus  光标出现、 blur 光标失去、submit
*/

/* 事件冒泡
  DOM元素存在嵌套关系的时候，触发子级元素的事件，其上级元素，若绑定同一类型的事件，也会被触发 -> 一致触发到 window 上。
*/

/* 事件委托：
  原理：利用事件冒泡的机制。
  给父元素绑定事件，触发子元素对应的事件，父元素的回调函数会被触发。

  作用：以 <ul>  >  N <li>   无需给每个 li 绑定事件，只需要给 ul 绑定一次事件即可。
    好处：1. 不需要给每个li绑定事件  ->  节省资源
      2. 动态添加的 li ，也无需再次单独为其绑定 事件
*/

/* 箭头函数  ->  本质就是 第三种声明函数的方式：  
  1. 赋值型 const f = function() {...} 
  2. 声明式  function f () {}
  3. 箭头函数 const f = () => {...}

  箭头函数的好处 - 写法变简单了：
    1. 省略了 function 关键字， 用 `=>` 替代函数的声明。  
    2. 若参数只有一个的时候，可以省略 `()`
    3. 若函数体内只有一个 表达式返回值，可以省略 `{}` 和 return；
        const add = (x, y) => x + y;
*/
</script>